import React, { createContext, useContext, useEffect } from 'react';
import { message } from 'antd';

// 创建消息上下文
const MessageContext = createContext(null);

/**
 * MessageProvider - 提供全局消息 API
 * 使用 Ant Design 的 message.useMessage() hook
 */
export function MessageProvider({ children }) {
    const [messageApi, contextHolder] = message.useMessage();

    // 设置全局消息 API，以便在非组件环境中使用
    useEffect(() => {
        setGlobalMessageApi(messageApi);

        return () => {
            setGlobalMessageApi(null);
        };
    }, [messageApi]);

    return (
        <MessageContext.Provider value={{ messageApi }}>
            {contextHolder}
            {children}
        </MessageContext.Provider>
    );
}

/**
 * 使用消息 API 的 hook
 * @returns {object} messageApi - Ant Design 消息 API，showMessage - 便捷的消息显示函数
 */
export function useMessage() {
    const context = useContext(MessageContext);

    if (!context) {
        throw new Error('useMessage 必须在 MessageProvider 内部使用');
    }

    const showMessage = (type, content, duration = 3) => {
        context.messageApi[type](content, duration);
    };

    return {
        ...context,
        showMessage
    };
}

/**
 * 获取消息 API 实例（用于非组件环境）
 * 注意：这需要在 MessageProvider 初始化后使用
 */
let globalMessageApi = null;

export function setGlobalMessageApi(api) {
    globalMessageApi = api;
}

export function getGlobalMessageApi() {
    return globalMessageApi;
}
